<template>
  <div class="main">
    <div class="lockscreen-box">
      <div class="icon-container">
        <LockScreen class="lock-icon" />
      </div>
      <div class="input-container">
        <el-input
          type="password"
          show-password
          @keyup.enter.native="unlock()"
          class="password-input"
          prefix-icon="el-icon-lock"
          placeholder="请输入锁屏密码"
          size="small"
          v-model="password"
          clearable
        ></el-input>
      </div>
      <div class="login-button-container">
        <el-button type="text" size="small" @click="routerLogin()" class="text-gray">退屏重新登入</el-button>
      </div>
      <div class="unlock-button-container">
        <el-button type="primary" icon="el-icon-unlock" @click="unlock()">解锁</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import LockScreen from "../../assets/icon/lock-screen.svg";
import service from "../../utils/request";
export default {
  name: "Index",
  components: {
    LockScreen
  },
  data() {
    return {
      password: null
    };
  },
  methods: {
    unlock() {
      if (this.password === null || this.password.length <= 0) {
        this.$notify({
          type: "error",
          title: "解锁密码",
          message: "请输入解锁密码！"
        });
        return;
      }
      this.$store.commit("updateLockScreen", false);
      const redirect = this.$route.query.redirect;
      const lockScreenPassword = sessionStorage.getItem("lockScreen");
      if (window.atob(lockScreenPassword) === this.password) {
        sessionStorage.removeItem("lockScreen");
        this.$router.push(redirect);
      } else {
        this.$notify({
          type: "error",
          title: "解锁密码",
          message: "解锁密码错误！"
        });
      }
    },
    routerLogin() {
      this.$confirm("确认后将会退出锁屏并跳转登入页面，请确认操作！", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          service.post("/userAuth/logout").then(res => {
            if (res.code === 200) {
              this.$store.commit("updateLockScreen", false);
              this.$store.dispatch("user/resetToken");
              this.$router.replace("/login");
            } else {
              this.$notify({
                title: "退出登入",
                type: "warning",
                message: "退出失败"
              });
            }
          });
        })
        .catch(() => {});
    }
  }
};
</script>

<style scoped>
.main {
  position: relative;
  background-color: #7ae5ff;
}

.lockscreen-box {
  width: 350px;
  height: 300px;
  background-color: #fbfbfb;
  border: 1px solid #ddd;
  position: absolute;
  border-radius: 5px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

/* 提取的内联样式 */
.icon-container {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.lock-icon {
  width: 100px;
  height: 100px;
}

.input-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.password-input {
  max-width: 280px;
}

.login-button-container {
  margin-top: 15px;
  display: flex;
  justify-content: center;
}

.text-gray {
  color: #999999;
}

.unlock-button-container {
  margin-top: 5px;
  display: flex;
  justify-content: center;
}
</style>
